// 图表: 出租率对比
import * as $echarts from '../../../components/ec-canvas/echarts'
import $chartOption from '../../../data/chartOption.js'

const $app = getApp()

function initChart(canvas, width, height, dpr) {
  let chart = $echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  })
  canvas.setChart(chart)
  // 设置图表配置项
  let option = {
    title: { text: '出租率对比' },
    grid: {
      left: 10,
      right: 40,
      bottom: 10,
      top: 60,
      containLabel: true
    },
    xAxis: { // ===== x轴 =====
      type: 'category',
      name: '类型',
      axisLine: $chartOption.axis_axisLine, // 轴线相关设置
      splitLine: $chartOption.axis_splitLine // 分隔线
    },
    yAxis: { // ===== y轴 =====
      type: 'value', // 类型: 类目轴
      name: '(%)',
      axisLine: $chartOption.axis_axisLine // 轴线相关设置
      // axisTick: { alignWithLabel: true } // boundaryGap:true时, 刻度线和标签对齐
    },
    dataZoom: [{ type: 'inside' }], // 区域缩放
    tooltip: { // ===== 提示框组件 =====
      ...$chartOption.tooltip_bar,
      formatter: (param) => {
        const b = param[0]
        return `${b.value[1]}：${b.value[0]}%`
      }
    },
    series: [{
      ...$chartOption.series_bar,
      data: []
    }],
    color: $chartOption.color1,
    textStyle: $chartOption.textStyle // ===== 全局的字体样式 =====
  }
  $app.$api.data.getLeasedRate({}).then(({ data }) => {
    console.log('api-出租率对比', data)
    let newData = data || {}
    const info = {
      business: '商业',
      industry: '工业',
      work: '办公',
      land: '土地',
      other: '其它'
    }
    for (const k in info) {
      const y = newData[k] ? (newData[k] * 100).toFixed(0) : 0
      const x = info[k]
      option.series[0].data.push([x, y])
    }
    chart.setOption(option)
  }).catch((err) => {})
  return chart
}

Component({
  data: {
    ec: { onInit: initChart }
  }
})
